<template>
  <v-card 
    :class="[
      'task-item-card',
      { 
        'completed': task.completed,
        'overdue': isOverdue,
        'important': task.isImportant
      }
    ]"
    variant="outlined"
    @click="$emit('edit', task)"
  >
    <v-card-text class="task-content">
      <div class="task-main">
        <!-- 完成状态复选框 -->
        <v-checkbox
          :model-value="task.completed"
          @update:model-value="$emit('toggle', task.id)"
          @click.stop
          density="compact"
          hide-details
          :color="task.isImportant ? 'error' : 'primary'"
        />
        
        <!-- 任务信息 -->
        <div class="task-info">
          <div class="task-title-row">
            <span 
              :class="[
                'task-title',
                { 'completed': task.completed }
              ]"
            >
              {{ task.title }}
            </span>
            
            <!-- 重要标记 -->
            <v-icon
              v-if="task.isImportant"
              icon="mdi-star"
              color="error"
              size="small"
              class="ml-2"
            />
          </div>
          
          <!-- 任务描述 -->
          <p 
            v-if="task.description"
            :class="[
              'task-description',
              { 'completed': task.completed }
            ]"
          >
            {{ task.description }}
          </p>
          
          <!-- 任务元信息 -->
          <div v-if="hasMetaInfo" class="task-meta">
            <!-- 截止时间 -->
            <div v-if="task.dueDate" class="meta-item">
              <v-icon 
                :icon="isOverdue ? 'mdi-alert-circle' : 'mdi-calendar'"
                :color="isOverdue ? 'error' : 'primary'"
                size="small"
              />
              <span 
                :class="{
                  'text-error': isOverdue,
                  'text-primary': !isOverdue
                }"
              >
                {{ formatDate(task.dueDate) }}
              </span>
            </div>
            
            <!-- 提醒时间 -->
            <div v-if="task.reminder" class="meta-item">
              <v-icon icon="mdi-bell" color="warning" size="small" />
              <span class="text-warning">
                {{ formatDateTime(task.reminder) }}
              </span>
            </div>
            
            <!-- 重复设置 -->
            <div v-if="task.repeat" class="meta-item">
              <v-icon icon="mdi-repeat" color="info" size="small" />
              <span class="text-info">
                {{ formatRepeat(task.repeat) }}
              </span>
            </div>
            
            <!-- 优先级 -->
            <div v-if="task.priority && task.priority !== 'low'" class="meta-item">
              <v-icon 
                :icon="getPriorityIcon(task.priority)"
                :color="getPriorityColor(task.priority)"
                size="small"
              />
              <span :class="`text-${getPriorityColor(task.priority)}`">
                {{ getPriorityText(task.priority) }}
              </span>
            </div>
            
            <!-- 标签 -->
            <div v-if="task.tags && task.tags.length > 0" class="meta-item">
              <v-chip
                v-for="tag in task.tags.slice(0, 2)"
                :key="tag"
                size="x-small"
                variant="outlined"
                class="mr-1"
              >
                {{ tag }}
              </v-chip>
              <span v-if="task.tags.length > 2" class="text-caption">
                +{{ task.tags.length - 2 }}
              </span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 任务操作 -->
      <div class="task-actions">
        <v-menu>
          <template #activator="{ props }">
            <v-btn
              icon="mdi-dots-vertical"
              size="small"
              variant="text"
              v-bind="props"
              @click.stop
            />
          </template>
          
          <v-list density="compact">
            <v-list-item @click.stop="$emit('edit', task)">
              <template #prepend>
                <v-icon icon="mdi-pencil" size="small" />
              </template>
              <v-list-item-title>编辑</v-list-item-title>
            </v-list-item>
            
            <v-list-item @click.stop="duplicateTask">
              <template #prepend>
                <v-icon icon="mdi-content-duplicate" size="small" />
              </template>
              <v-list-item-title>复制</v-list-item-title>
            </v-list-item>
            
            <v-list-item @click.stop="toggleImportant">
              <template #prepend>
                <v-icon 
                  :icon="task.isImportant ? 'mdi-star-off' : 'mdi-star'"
                  size="small" 
                />
              </template>
              <v-list-item-title>
                {{ task.isImportant ? '取消重要' : '标记重要' }}
              </v-list-item-title>
            </v-list-item>
            
            <v-divider />
            
            <v-list-item @click.stop="$emit('delete', task.id)">
              <template #prepend>
                <v-icon icon="mdi-delete" size="small" color="error" />
              </template>
              <v-list-item-title class="text-error">删除</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </div>
    </v-card-text>
  </v-card>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { Task } from '@/stores/taskStore'

interface Props {
  task: Task
}

interface Emits {
  toggle: [taskId: string]
  edit: [task: Task]
  delete: [taskId: string]
  duplicate: [task: Task]
  updateImportant: [taskId: string, isImportant: boolean]
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 计算属性
const isOverdue = computed(() => {
  if (!props.task.dueDate || props.task.completed) return false
  return new Date(props.task.dueDate) < new Date()
})

const hasMetaInfo = computed(() => {
  return props.task.dueDate || 
         props.task.reminder || 
         props.task.repeat || 
         (props.task.priority && props.task.priority !== 'low') ||
         (props.task.tags && props.task.tags.length > 0)
})

// 方法
const formatDate = (date: Date | string) => {
  const d = new Date(date)
  const today = new Date()
  const tomorrow = new Date(today)
  tomorrow.setDate(tomorrow.getDate() + 1)
  
  const dateOnly = new Date(d.getFullYear(), d.getMonth(), d.getDate())
  const todayOnly = new Date(today.getFullYear(), today.getMonth(), today.getDate())
  const tomorrowOnly = new Date(tomorrow.getFullYear(), tomorrow.getMonth(), tomorrow.getDate())
  
  if (dateOnly.getTime() === todayOnly.getTime()) {
    return '今天'
  } else if (dateOnly.getTime() === tomorrowOnly.getTime()) {
    return '明天'
  } else {
    return d.toLocaleDateString('zh-CN', {
      month: 'short',
      day: 'numeric'
    })
  }
}

const formatDateTime = (datetime: Date | string) => {
  const d = new Date(datetime)
  return d.toLocaleString('zh-CN', {
    month: 'short',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const formatRepeat = (repeat: { type: string; customDays?: number }) => {
  switch (repeat.type) {
    case 'daily':
      return '每天'
    case 'weekly':
      return '每周'
    case 'monthly':
      return '每月'
    case 'custom':
      return `每${repeat.customDays}天`
    default:
      return repeat.type
  }
}

const getPriorityIcon = (priority: string) => {
  switch (priority) {
    case 'high':
      return 'mdi-chevron-double-up'
    case 'medium':
      return 'mdi-chevron-up'
    default:
      return 'mdi-minus'
  }
}

const getPriorityColor = (priority: string) => {
  switch (priority) {
    case 'high':
      return 'error'
    case 'medium':
      return 'warning'
    default:
      return 'info'
  }
}

const getPriorityText = (priority: string) => {
  switch (priority) {
    case 'high':
      return '高优先级'
    case 'medium':
      return '中优先级'
    default:
      return '低优先级'
  }
}

const duplicateTask = () => {
  emit('duplicate', props.task)
}

const toggleImportant = () => {
  emit('updateImportant', props.task.id, !props.task.isImportant)
}
</script>

<style scoped>
.task-item-card {
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 8px;
}

.task-item-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.task-item-card.completed {
  opacity: 0.7;
}

.task-item-card.overdue {
  border-left: 4px solid rgb(var(--v-theme-error));
}

.task-item-card.important {
  border-left: 4px solid rgb(var(--v-theme-error));
}

.task-content {
  padding: 12px 16px;
}

.task-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

.task-info {
  flex: 1;
  min-width: 0;
}

.task-title-row {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.task-title {
  font-weight: 500;
  line-height: 1.4;
  word-break: break-word;
  transition: all 0.2s ease;
}

.task-title.completed {
  text-decoration: line-through;
  color: rgb(var(--v-theme-on-surface-variant));
}

.task-description {
  font-size: 0.875rem;
  color: rgb(var(--v-theme-on-surface-variant));
  margin: 4px 0 8px 0;
  line-height: 1.4;
  word-break: break-word;
}

.task-description.completed {
  text-decoration: line-through;
}

.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
}

.task-actions {
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.task-item-card:hover .task-actions {
  opacity: 1;
}

@media (max-width: 600px) {
  .task-actions {
    opacity: 1;
  }
  
  .task-meta {
    flex-direction: column;
    gap: 4px;
  }
}
</style>